<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" />
    <link rel="stylesheet" href="css/index.css">
    <title>东坡肉</title>
</head>
<body>
    <div class="wrap">
        <!-- 首页 -->
        <div class="index">
            <div class="bc">
                <div class="meat"></div>
                <div class="loading">loading<span class="dots">...</span></div>
                <div class="percent">
                    <p class="percentage">0</p>
                    <span>%</span>
                </div>
            </div>
        </div>
        <!-- 第二页 -->
        <div class="page2">
            <div class="bc">
                <div class="sm-meat">
                    <img src="images/meat3.png" alt="">
                    <span>一碗东坡肉</span>
                </div>
                <p class="word">聊美食<br/>我是专业的</p>
                <div class="circle">
                    <div class="big-circle"></div>
                    <div class="middle-circle">
                        <div class="line">
                            <div class="food"></div>
                        </div>
                    </div>
                    <div class="small-circle1">
                        <div class="line">
                            <div class="food"></div>
                        </div>
                        <div class="line line2">
                            <div class="food"></div>
                        </div>
                        <div class="line line3">
                            <div class="food"></div>
                        </div>
                        <div class="line line4">
                            <div class="food"></div>
                        </div>
                    </div>
                    <div class="small-circle2">
                        <div class="meat"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第三页 -->
        <div class="page3">
            <div class="bc">
                <div class="sm-meat">
                    <img src="images/meat3.png" alt="">
                    <span>一碗东坡肉</span>
                </div>
                <div class="words">
                    <div class="word">
                        <p>猪肉焯水，<br>切成大小适宜的方块。</p>
                        <p>肥瘦适当、层层肥瘦相间，比例接近。</p>
                        <p>—— 五花肉挑选经验</p>
                    </div>
                    <div class="word word2" style="display: none">
                        <p>用铁锅或者砂锅放入葱、<br>姜、八角，肉皮朝下放入<br>五花肉，倒入黄酒没过食材。<br></p>
                        <p>颗粒饱满、整齐完整、呈棕红色、夹<br>边裂隙较大。</p>
                        <p>—— 八角挑选经验</p>
                    </div>
                    <div class="word word3" style="display: none">
                        <p>放入冰糖、老抽、盐，<br>大火煮开后，小火慢炖<br>1.5小时大火收汁出锅！</p>
                        <p>晶体光泽、晶粒均匀不含杂质，呈<br>白色或淡黄色半透明。</p>
                        <p>—— 冰糖挑选经验</p>
                    </div>
                </div>
                <div class="choice">
                    <div>
                        <div class="pic">
                            <span class="dot">
                                <img src="images/1.png" alt="">
                            </span>
                        </div>
                    </div>
                    <div>
                        <div class="pic">
                            <span class="dot">
                                <img src="images/2.png" alt="">
                            </span>
                        </div>
                    </div>
                    <div>
                        <div class="pic">
                            <span class="dot">
                                <img src="images/3.png" alt="">
                            </span>
                        </div>
                    </div>
                </div>
                <div class="arrow"></div>
            </div>
        </div>
        <!-- 第四页 -->
        <div class="page4">
            <div class="bc">
                <div class="poem">
                    <h3>《猪肉颂》</h3>
                    <p style="text-indent: 2em;margin-top: 50px;">净洗铛，少著水，柴头罨烟焰不起。</p>
                    <p>待他自熟莫催他，火候足时他自美。黄州</p>
                    <p>好猪肉，价贱如泥土。</p>
                    <p style="text-indent: 2em">贵者不肯吃，贫者不解煮，早晨起来打两碗，饱得自家君莫管。</p>
                    <div class="author">——苏轼</div>
                </div>
                <div class="meat"></div>
                <p class="method">
                    <a href="javascript:;">了解做法<img src="images/滑动箭头 .png" alt=""></a>
                </p>
            </div>
        </div>
        <!-- BGM -->
        <div class="bg-music">
            <div class="CD">
                <div class="bgm">
                    <audio src="media/bgm.mp3" loop></audio>
                </div>
            </div>
        </div>
    </div>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>

</body>
</html>